<template>
    <h1>百度地图展示</h1>
    <div id="container"></div>
</template>

<script>
export default {
    mounted() {
        // 创建地图实例
        const map = new BMapGL.Map("container")

        // 设置中心点坐标
        var point = new BMapGL.Point(116.404, 39.915);

        // 地图初始化，同时设置地图展示级别
        map.centerAndZoom(point, 15);

        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true); 

        // 变更地图类型为 地球
        map.setMapType(BMAP_EARTH_MAP);

        var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);
    }
}
</script>

<style scoped>
#container {
    height: 600px;
}
</style>